@import '../../button/style/mixins.scss';

@include b(keyboard) {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  color: $color-text;
  user-select: none;

  @include e(item) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $keyboard-item-font-size;
    position: relative;
    @include button-base();
    @include button-theme( $color-text, #fff, $button-default-border);

    &:active {
      color: $color-text;
    }

    @include m(ok) {
      font-size: r(16);
      @include button-theme($color-text-inverse, $theme-primary, $button-default-border);
    }

    @include m(disabled) {
      background-color: $keyboard-disabled-background;

      &:active {
        background-color: $keyboard-disabled-background;
      }
    }
  }

  @include e(keys) {
    display: flex;
    flex-wrap: wrap;
    width: 75%;

    @include e(item) {
      width: 33.333333%;
      height: $keyboard-item-height;
      @include onepx(top left);

      &:nth-of-type(3n + 1) {
        @include onepx(top);
      }
    }
  }

  @include e(handle) {
    display: flex;
    flex-direction: column;
    width: 25%;

    @include e(item) {
      flex: 1;

      &:first-of-type {
        @include onepx(top left);
      }
    }
  }

  @include e(icon) {
    font-size: $keyboard-icon-font-size;
  }
}
